import { useState, useEffect, useRef } from 'react';
import './index.css';
import Children from './children.tsx';
const useclickoutside = () => {
  const [data, setData] = useState('111');
  const cref = useRef(null);
  const array = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Mary' },
    { id: 3, name: 'Tom' },
  ];
  const fn = (data) => {
    console.log('11111', data);
  };
  const setDatafn = (data) => {
    console.log('data', data);
    setData(data);
  };
  const handleClickOutside = (event) => {
    console.log('12222', event);
  };
  return (
    <div>
      <div>{data}</div>
      <div>
        {array.map((item) => (
          <div onClick={fn(item)} className={'border'}>
            {item.name}
          </div>
        ))}
      </div>
      <Children data={data} ref={cref}></Children>
      <button onClick={() => setDatafn('222')}>Open Modal</button>
      <button onClick={() => handleClickOutside()}>触发子组件函数</button>
    </div>
  );
};

export default useclickoutside;
